<template>
    <div class="content">
        <SearchTitle />
        <div class="CenterBox">
            <div class="fhanBox" @click="fanhuifun">&lt;返回</div>
            <el-card>
                <div class="CardTopBox">
                    <div class="CardTitleBox">{{ formData.title }}</div>
                    <div class="CardDateBox">{{ formData.createTime }}</div>
                </div>
                <div class="CardNrBox" v-html="formData.content"></div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import SearchTitle from '@/components/general/SearchTitle.vue';
import { queryNewsInfo } from '@/api/api.js';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const formData = ref({});
onMounted(() => {
    if (route.query.id) {
        queryNewsInfofun(route.query.id)
    }
});
const queryNewsInfofun = async (id) => {
    const res = await queryNewsInfo(id);
    if (res.code === 200) {
        formData.value = res.result;
    } else {
        return null;
    }
};
const fanhuifun = () => {
    router.go(-1);
};
</script>

<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    // min-height: calc(100vh - 60px);
    min-height: 100vh;
    background-size: 100%;
    background-color: #f3f9fe;
}

.fhanBox {
    font-size: 16px;
    color: #767879;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}

.CardTopBox {
    border-bottom: 1px solid #ccc;

    .CardTitleBox {
        font-weight: bold;
        font-size: 30px;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5;
    }

    .CardDateBox {
        margin: 15px 0;
        font-size: 12px;
        color: #747474;
    }
}

.CardNrBox {
    ::v-deep p {
        text-indent: 2em;
        text-align: justify;
    }

    ::v-deep img {
        display: block;
        margin: 0 auto;
        max-width: 80%;
    }
}
</style>